<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  #div1 {
    width: 712px;
    height: 108px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
  }

  #div1 ul {
    position: absolute;
    left: 0;
    top: 0;
  }

  #div1 ul li {
    float: left;
    width: 178px;
    height: 108px;
    list-style: none;
  }
</style>

<body>

  <button onclick="speed = -2">向左</button>
  <button onclick="speed = 2">向右</button>

  <div id="div1">
    <ul>
      <li>
        <div style="width: 10rem; height: 10rem;background-color: lightblue; text-align: center;">1</div>
      </li>
      <li>
        <div style="width: 10rem; height: 10rem;background-color: lightblue; text-align: center;">2</div>
      </li>
      <li>
        <div style="width: 10rem; height: 10rem;background-color: lightblue; text-align: center;">3</div>
      </li>
      <li>
        <div style="width: 10rem; height: 10rem;background-color: lightblue; text-align: center;">4</div>
      </li>


    </ul>
  </div>

  <script>
    let div1 = document.getElementById("div1")
    let FastUL = document.getElementsByTagName("ul")[0]
    FastUL.innerHTML = FastUL.innerHTML + FastUL.innerHTML

    let speed = -1

    let timer = setInterval(move, 10);

    function move() {
      //处理向左移动
      if (FastUL.offsetLeft < -FastUL.offsetWidth / 2) {
        FastUL.style.left = "0"
      }
      //处理向右移动
      if (FastUL.offsetLeft > 0) {
        FastUL.style.left = -FastUL.offsetWidth / 2 + "px"
      }
      FastUL.style.left = FastUL.offsetLeft + speed + "px"
    }
    //鼠标悬停
    div1.onmouseover = function () {
      clearInterval(timer)
    }
    //鼠标释放
    div1.onmouseout = function () {
      timer = setInterval(move, 30);
    }


  </script>
</body>

</html>